<template>
  <div>
    <!-- // 网站导航模块↓ -->
    <div class="MENUClass">
      <div class="container">
        <button ref="btnRef" class="btn" @click="MENU_dialogOpenFn">MENU</button>
      </div>
    </div>
    <el-drawer v-model="MENU_dialog" :with-header="false" size="250px" direction="ltr">
      <div class="MENU_dialog_main">
        <h1>网站导航</h1>
        <a href="/individual">个人中心</a>
        <br />
        <a href="/others">其他模块</a>
        <br />
        <a href="/login">登录页</a>
        <br />
        <a href="/homePage">主页</a>
        <br />
        <a href="/blog">博客模块</a>
        <br />
        <a href="/">返回</a>
      </div>
    </el-drawer>
  </div>
</template>
<script lang="ts" setup>
const btnRef = ref<HTMLElement | null>()
// let isLogin = ref<Boolean>(false)
let MENU_dialog = ref<Boolean>(false)
import { onMounted, reactive, ref, computed } from 'vue'

const { isLogin } = defineProps(['isLogin'])
const isLoginFlag = computed(() => isLogin)

function MENU_dialogOpenFn() {
  MENU_dialog.value = true
}

onMounted(() => {
  //配置背景动画效果 在login页不需要展示
  const loginReg = RegExp(/\/login/)
  if (isLoginFlag.value) {
    btnRef.value!.classList.add('btnLoginClass')
  } else {
    btnRef.value!.classList.remove('btnLoginClass')
  }
})
</script>

<style lang="scss" scoped>
.MENUClass {
  position: fixed;
  z-index: 999;
  margin-left: 18px;
  margin-top: 10px;
  display: inline-block;
  width: 100px;
  height: 40px;
  .container {
    display: flex;
    height: 36px;
    button {
      font-size: 12px;
      padding: 10px 28px;
      color: #fff;
      // color: #1e2529;
      cursor: pointer;
      text-transform: uppercase;
    }
    .btn {
      text-decoration: none;
      border: 1px solid rgb(120, 120, 248);
      position: relative;
      background-color: rgba(120, 120, 248, 0);
      overflow: hidden;
      &:hover {
        box-shadow: 1px 1px 25px 10px rgba(42, 149, 211, 0.4);
      }
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(120deg, transparent, rgba(45, 241, 193, 0.4), transparent);
        transition: all 650ms;
      }
      &:hover::before {
        left: 100%;
      }
    }
  }
}

.btnLoginClass {
  border: 1px solid rgb(255, 255, 255) !important;
  color: #fff !important;
}
.MENU_dialog_main {
  height: 90%;
}
</style>
